﻿<h1 class="page-header">
    <span page-header="Transaction">
        Transaction: <span style="font-size: 28px;">{{transaction.name}}</span>
    </span>
    <div class="pull-right">
        <a ui-sref="transaction-edit({id: transaction.id})" class="btn btn-info">
            Edit transaction
        </a>

        <button type="button" class="btn btn-danger" bs-modal data-template="confirmDeleteTransaction">
            Delete transaction
        </button>
    </div>
</h1>
<script type="text/ng-template" id="confirmDeleteTransaction">
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" ng-show="title">
                    <button type="button" class="close" ng-click="$hide()">&times;</button>
                    <h4 class="modal-title">Confirm</h4>
                </div>
                <div class="modal-body">Are you sure?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" busy-click="deleteTransaction(transaction)">Confirm</button>
                    <button type="button" class="btn btn-default" ng-click="$hide()">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</script>

    <div class="well panel-transaction-info">
        <div class="row">
            <div class="col-sm-2">
                <label>MLS: </label>
            </div>
            <div class="col-sm-4">
                <span>{{transaction.transactionNo}}</span>
            </div>
            <div class="col-sm-2">
                <label>Location: </label>
            </div>
            <div class="col-sm-4">
                <span>{{transaction.locationName}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
                <label>Status: </label>
            </div>
            <div class="col-sm-4">
                <span>{{transaction.statusName}}</span>
            </div>
            <div class="col-sm-2">
                <label>Commission: </label>
            </div>
            <div class="col-sm-4">
                <span>{{transaction.totalCommission | currency}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
                <label>Accepted on: </label>
            </div>
            <div class="col-sm-4">
                <span>{{transaction.acceptanceDate | date: 'MMMM dd, yyyy'}}</span>
            </div>
            <div class="col-sm-2">
                <label>Added on: </label>
            </div>
            <div class="col-sm-4">
                <span>{{transaction.createdDate | date: 'MMMM dd, yyyy'}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
                <label>List price: </label>
            </div>
            <div class="col-sm-4">
                <span>{{transaction.listPrice | currency}}</span>
            </div>
            <div class="col-sm-2">
                <label>Added by: </label>
            </div>
            <div class="col-sm-4">
                <span>{{transaction.createdBy}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
                <label>Sale price: </label>
            </div>
            <div class="col-sm-4">
                <span>{{transaction.sellPrice | currency}}</span>
            </div>
            <div class="col-sm-2">
                <label>New offers: </label>
            </div>
            <div class="col-sm-4">
                <!--<span>{{transaction.createdBy}}</span>-->
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
                <label>Buyer:</label>
            </div>
            <div class="col-sm-4">
                <span>{{transaction.buyerName}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
                <label>Seller:</label>
            </div>
            <div class="col-sm-4">
                <span>{{transaction.sellerName}}</span>
            </div>
        </div>
    </div>

    <div class="panel-contact">
        <div class="panel panel-default" ng-init="isCollapsed = true">
            <div class="panel-heading">
                <div class="panel-title">
                    <h4 style="display: inline-block;">Contact</h4>
                    <b class="badge spacing-left-xs">{{contacts.length}}</b>
                    <button type="button" class="btn btn-default" style="margin-left: 16px;" ng-click="isCollapsed = !isCollapsed">{{ isCollapsed ? 'Show' : 'Hide' }}</button>
                    <button type="button" class="btn btn-default pull-right" ng-click="showAddContact()" ng-hide="newItem.$add">
                        Add contact
                    </button>
                    <button type="button" class="btn btn-default pull-right" ng-click="cancelAddContact()" ng-show="newItem.$add">
                        Finish adding contact
                    </button>
                </div>
            </div>
            <div class="panel-body">
                <table class="table">
                    <thead>
                        <tr ng-show="newItem.$add || !isCollapsed">
                            <th class="col-sm-1">Role</th>
                            <th class="col-sm-2">Name</th>
                            <th class="col-sm-2">Info</th>
                            <th class="col-sm-2">Phone</th>
                            <th class="col-sm-2">Fax</th>
                            <th class="col-sm-2">Email</th>
                            <td class="col-sm-1">&nbsp;</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in contacts" ng-hide="isCollapsed">
                            <td ng-if="!item.$edit">{{item.role}}</td>
                            <td ng-if="!item.$edit">{{item.name}}</td>
                            <td ng-if="!item.$edit">{{item.info}}</td>
                            <td ng-if="!item.$edit"><a href="tel://{{item.phone}}">{{item.phone}}</a></td>
                            <td ng-if="!item.$edit">{{item.fax}}</td>
                            <td ng-if="!item.$edit"><a href="mailto://{{item.email}}">{{item.email}}</a></td>
                            <td ng-if="!item.$edit && !item.$delete">
                                <button type="button" class="btn btn-info btn-sm" ng-click="editContact(item)">
                                    <i class="glyphicon glyphicon-edit" title="Edit"></i>
                                </button>
                                <button type="button" class="btn btn-danger btn-sm" ng-click="item.$delete = true">
                                    <i class="glyphicon glyphicon-trash" title="Delete"></i>
                                </button>
                            </td>
                            <td ng-if="item.$edit"><input class="form-control" ng-model="item.role" required></td>
                            <td ng-if="item.$edit"><input class="form-control" ng-model="item.name" required></td>
                            <td ng-if="item.$edit"><input class="form-control" ng-model="item.info"></td>
                            <td ng-if="item.$edit"><input class="form-control" ng-model="item.phone"></td>
                            <td ng-if="item.$edit"><input class="form-control" ng-model="item.fax"></td>
                            <td ng-if="item.$edit"><input type="email" class="form-control" ng-model="item.email"></td>
                            <td ng-if="item.$edit">
                                <button type="button" class="btn btn-info btn-sm" busy-click="updateContact(item)">
                                    <i class="glyphicon glyphicon-ok" title="Save"></i>
                                </button>
                                <button type="button" class="btn btn-info btn-sm" ng-click="cancelContact(item)">
                                    <i class="glyphicon glyphicon-remove" title="Back"></i>
                                </button>
                            </td>
                            <td ng-if="item.$delete">
                                <button type="button" class="btn btn-warning btn-sm" busy-click="deleteContact($index)">
                                    <i class="glyphicon glyphicon-ok" title="Delete"></i>
                                </button>
                                <button type="button" class="btn btn-info btn-sm" ng-click="item.$delete = false">
                                    <i class="glyphicon glyphicon-remove" title="Back"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td ng-if="newItem.$add"><input class="form-control" ng-model="newItem.role" required></td>
                            <td ng-if="newItem.$add"><input class="form-control" ng-model="newItem.name" required></td>
                            <td ng-if="newItem.$add"><input class="form-control" ng-model="newItem.info"></td>
                            <td ng-if="newItem.$add"><input class="form-control" ng-model="newItem.phone"></td>
                            <td ng-if="newItem.$add"><input class="form-control" ng-model="newItem.fax"></td>
                            <td ng-if="newItem.$add"><input type="email" class="form-control" ng-model="newItem.email"></td>
                            <td ng-if="newItem.$add">
                                <button type="button" class="btn btn-info" busy-click="addContact(newItem)">Save</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="panel panel-default" ng-init="isNoteCollapsed = true">
            <div class="panel-heading">
                <div class="panel-title clearfix">
                    <h4 style="display: inline-block;">Note</h4>
                    <b class="badge spacing-left-xs">{{notes.length}}</b>
                    <button type="button" class="btn btn-default pull-right" ng-click="showAddNote()" ng-hide="newNote.$show">
                        Add note
                    </button>
                    <button type="button" class="btn btn-default pull-right" ng-click="hideAddNote()" ng-show="newNote.$show">
                        Finish adding note
                    </button>
                </div>
            </div>
            <div class="panel-body">
                <div collapse="!newNote.$show" class="spacing-bottom-md">
                    <div class="row spacing-bottom-sm">
                        <div class="col-sm-6">
                            <textarea ng-model="newNote.content" class="form-control" rows="6" placeholder="Type your note here. When you're finished, select the agents or staff who should receive your note by email."></textarea>
                        </div>
                        <div class="col-sm-6">
                            <div class="spacing-bottom-sm">
                                <div>Email this note to the agents or staff selected below:</div>
                                <button type="button" class="btn btn-default spacing-top-sm" ng-model="newNote.agentIds"
                                        data-multiple="1" placeholder="No agents selected" max-length="5"
                                        ng-options="item.value as item.label for item in agentSelectionList" bs-select></button>
                            </div>
                            <div class="btn-group" bs-checkbox-group ng-model="newNote">
                                <label class="btn btn-default"><input type="checkbox" value="includeIncompletedTasks">Append <strong>incompleted</strong> tasks to note</label>
                                <label class="btn btn-default"><input type="checkbox" value="includeCompletedTasks">Append <strong>completed</strong> tasks to note</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 text-right">
                            <button type="button" class="btn btn-info" busy-click="addNote(newNote)">Send note</button>
                        </div>
                    </div>
                </div>
                <ul class="list-group">
                    <li class="list-group-item" ng-repeat="item in notes">
                        <div class="row">
                            <div class="col-sm-8">{{item.content}}</div>
                            <div class="col-sm-3" ng-hide="item.$confirm">
                                <div>{{item.createdBy}}</div>
                                <div>{{item.createdDate | date: 'MMMM dd, yyyy'}}</div>
                                <div>Emailed to:
                                    <span ng-repeat="agent in item.agents"><a href="mailto://{{agent.email}}">{{agent.name}}({{agent.email}})</a></span>
                                </div>
                            </div>
                            <div class="col-sm-1" ng-hide="item.$confirm">
                                <button type="button" class="btn btn-sm pull-right btn-danger" ng-click="item.$confirm = true">
                                    <i class="glyphicon glyphicon-trash" title="Delete"></i>
                                </button>
                            </div>
                            <div class="col-sm-4 text-right" ng-show="item.$confirm">
                                <button type="button" class="btn btn-danger btn-sm" busy-click="deleteNote($index)">
                                    <i class="glyphicon glyphicon-ok" title="Delete"></i>
                                </button>
                                <button type="button" class="btn btn-info btn-sm" ng-click="item.$confirm = undefined">
                                    <i class="glyphicon glyphicon-remove" title="Back"></i>
                                </button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
